<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<include file="Public:base" />
<script type="text/javascript">
$(document).ready(function() {
	
	$("#fileSubmit").hide();
	
	// on方法可以动态绑定，但是 必须在生成的 新元素在 这个ID下面   这里就是 对 id为fileli的 ul下面
	// 所有 class为statusspan元素下面的 a标签（可以是动态生成的）绑定 单击事件 
	$("#fileli").on('click', '.statusspan a', function () {
		   var idval = $(this).attr("id");
		   var id = idval.split("_")[1];
	     	$.post("__URL__/lock/id/"+id, function (result) {
	     		if(result=="lock"){
	     			bootbox.alert("已锁定", function() {
	                  $("#lock_"+id).parent().html(' 锁定 | <a id="lock_'+id+'">可见</a>');
	              });
	     		}else if(result=="unlock"){
	     			bootbox.alert("已可见", function() {
		                  $("#lock_"+id).parent().html(' 可见 | <a id="lock_'+id+'">锁定</a>');
		              });
	     		}else {
	     			bootbox.alert("处理失败", function() {
	                  //console.log("Alert Callback");
	              });
	     		}
	     		
		    }); 
	});
	
	//$("[id^=delphoto]").on("click", function () {
	$("#fileli").on('click', '.delspan a', function () {
		var idval = $(this).attr("id");
		 bootbox.confirm("确认删除", function(result) {
         if(result){
      	   var id = idval.split("_")[1];
      	 	$.post("__URL__/del/id/"+id, function (result) {
	       		if(result=="del"){
                   $("#fileli_"+id).hide();
	       		}else {
	       			bootbox.alert("删除失败", function() {
                       //console.log("Alert Callback");
                });
	       		}
	       		
		    }); 	
  	       	
         }
       });
   });
	
	
});
</script>
</head>
<body>
<include file="Public:header" />

<div class="home-index">
  <div class="container">
    <div class="row">
       <ol class="breadcrumb">
        <li>首页</li>
        <li><a href="__MODULE__/Article/index{$flagurl}">{$flagname|default=快捷}管理</a></li>
        <li>{$art.title}</li>
        <li class="active">实景照查看</li>
      </ol>
      <div class="search-box">
        <form class="form-inline" role="form" id="photomanage" >
          <div class="form-group">
            <label class="sr-only" >上传</label>
            <input type="file" multiple="multiple" id="upload_field"  placeholder="上传图片"/>
          </div>
          <input type="hidden" id="photoable" name="photoable"  value='{$art.flag}' >
          <input type="hidden"id="photoable_id" name="photoable_id"  value='{$art.id}' >
          
          <button id="fileSubmit" type="button" class="btn btn-primary">开始上传</button>
        </form>
        
        <div class="form-group">
            <div id="preview" class="upload_preview">
			</div>
          </div>
        
      </div>
      
      <div id="filediv" class="box-content" style="display: block;">
               <div class="upload_photo_box clearfix">
                   <ul id="fileli">
                       <volist name='data' id='vo'>
                           <li id="fileli_{$vo.id}">
	                   
							
                            <a href='__ROOT__{$vo.path}' target="_blank">
                             	<img src="__ROOT__{$vo.path}" alt="" title="">
                            </a>
                            <br/>
                            <span class='delspan'>
                            <a id="delphoto_{$vo.id}" href="javascript:;" title="删除" class="icon-trash"></a>
                            </span>
                            
                            <span class='small-picture'>
                             <a href="__URL__/small/artid/{$art.id}/photoid/{$vo.id}" class="icon-picture" title="设置缩略图"></a>
                            </span>
                              	
                           </li>
                        </volist> 

                   </ul>
               </div>

               <div class="row-fluid">
                   <div class="span12 center">
                       <div class="pagination">
                           <s:property value="pageBar" escape="false"/>
                       </div>
                   </div>
               </div>

           </div>
      
      
    </div>
  </div>
</div>

</body>
<script type="text/javascript">
$(function() {
	
	var params = {
			fileInput : $("#upload_field").get(0),
			dragDrop : $("#fileDragArea").get(0),//拖拽 div ID
			upButton : $("#fileSubmit").get(0),
			url : "__MODULE__/Photos/uploadimg",
			filter : function(files) {
				var arrFiles = [];
				for ( var i = 0, file; file = files[i]; i++) {
					if (file.type.indexOf("image") == 0) {
						if (file.size >= 2*1024*1000) {
							alert('您这张"' + file.name
									+ '"图片大小过大，应小于2M');
						} else {
							arrFiles.push(file);
						}
					} else {
						alert('文件"' + file.name + '"不是图片。');
					}
				}
				return arrFiles;
			},
			onSelect : function(files) {
				var html = '', i = 0;
				$("#preview").html(
						'<div class="upload_loading"></div>');
				var funAppendImage = function() {
					file = files[i];
					if (file) {
						var reader = new FileReader()
						reader.onload = function(e) {
							html = html
									+ '<div id="uploadList_'+ i +'" class="upload_append_list">'
									+ '<img id="uploadImage_' + i + '" src="' + e.target.result + '" class="upload_image" /></p>'
                  					+ '<a href="javascript:" class="upload_delete icon-trash" title="删除" data-index="'+ i +'"></a>'
									+ '<span id="uploadProgress_' + i + '" class="upload_progress"></span>'
									+ '</div>';
							i++;
							funAppendImage();
						}
						reader.readAsDataURL(file);
					} else {
						$("#preview").html(html);
						if (html) {
							//删除方法
							$(".upload_delete")
									.click(
											function() {
												ZXXFILE
														.funDeleteFile(files[parseInt($(
																this)
																.attr(
																		"data-index"))]);
												return false;
											});
							//提交按钮显示
							$("#fileSubmit").show();
						} else {
							//提交按钮隐藏
							$("#fileSubmit").hide();
						}
					}
				};
				funAppendImage();
			},
			onDelete : function(file) {
				$("#uploadList_" + file.index).fadeOut();
			},
			onDragOver: function() {
				$(this).addClass("upload_drag_hover");
			},
			onDragLeave: function() {
				$(this).removeClass("upload_drag_hover");
			},
			onProgress: function(file, loaded, total) {
				var eleProgress = $("#uploadProgress_" + file.index), percent = (loaded / total * 100).toFixed(2) + '%';
				eleProgress.show().html(percent);
			},
			onSuccess: function(file, response) {
				var json =  eval('('+response+')');
				var id = json.id;
				var path = json.path;
				
				var li = $('<li id="fileli_'+id+'"></li>');
				var a_del = $('<span class="delspan"><a id="delphoto_'+id+'" href="javascript:;" title="删除" class="icon-trash"></a></span>');
				var sp_sp = $('<span class="small-picture"><a href="__URL__/small/artid/{$art.id}/photoid/'+id+'" class="icon-picture" title="设置缩略图" ></a></span>');
				var a_img = $('<a href="__ROOT__'+path+'" target="_blank"><img src="__ROOT__'+path+'" alt="" title=""></a>');
				
				li.append(a_img).append(a_del).append(sp_sp);
				
				//判断 如果 此用户 没有 图片的话，就在 这个ul 下面 append
				if ($("#fileli li").length < 1) {
	                $("#fileli").append(li);
	            } else {
	                var firstli = $("#fileli li:first");
	                firstli.before(li);
	            }
			},
			onFailure: function(file) {
				$("#uploadInf").append("<p>图片" + file.name + "上传失败！</p>");
				$("#uploadImage_" + file.index).css("opacity", 0.2);
			},
			onComplete: function() {
				//提交按钮隐藏
				$("#fileSubmit").hide();
				//file控件value置空
				$("#fileImage").val("");
				$("#uploadInf").append("<p>当前图片全部上传完毕，可继续添加上传。</p>");
			} 
			
			
		};
		ZXXFILE = $.extend(ZXXFILE, params);
		ZXXFILE.init();
});
</script>

</html>